<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>服务发布工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="layui/css/layui.css" rel="stylesheet">
    <link href="layui/tableFilter/tableFilter.css" rel="stylesheet">
    <style>
        .layui-layout-admin .layui-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #1e9fff!important
        }
        .layui-body {
            position: relative;
            left: 200px;
            right: 200px;
            top: 0;
            bottom: 0;
            z-index: 900;
            width: auto;
            box-sizing: border-box;
        }
        .status-online{
            background-color: #1abb4c;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-blue">服务发布工具</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    运维人
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">Your Profile</a></dd>
                    <dd><a href="javascript:;">Settings</a></dd>
                    <dd><a href="api/logout">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text" id="ID-server-info" style="font-size: medium">
                注册中心：0.0.0.0:8848  <br>
                服务分组：DEFAULT
            </blockquote>
            <div class="layui-card layui-panel">

                <div style="padding: 16px;">
                    <table id="nodes-table" lay-filter="nodes"></table>
                </div>

            </div>
            <br><br>
        </div>
    </div>
    <!--  <div class="layui-footer">-->
    <!--    &lt;!&ndash; 底部固定区域 &ndash;&gt;-->
    <!--    底部固定区域-->
    <!--  </div>-->
</div>
<script type="text/html" id="templet-theads-tool">
    <div class="layui-clear-space" style="align-content: center">
        <a class='layui-btn layui-btn-normal layui-btn {{= d.enabled == false ? "" : "layui-hide" }}' lay-event="online" >上线</a>
        <a class='layui-btn layui-btn-danger layui-btn {{= d.enabled == true ? "" : "layui-hide" }}' lay-event="offline" >下线</a>
    </div>
</script>
<script type="text/html" id="ID-table-demo-templet-switch">
    <!-- 这里的 checked 的状态值判断仅作为演示 -->
    <button type="button" class='layui-btn {{= d.enabled == true ? "status-online" : "layui-btn-disabled" }}'> {{= d.enabled == true ? "运行中" : "已下线" }}</button>

</script>
<script src="layui/layui.js"></script>
<script src="layui/tableFilter/tableFilter.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util','table'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;

        $.post('api/service/info',{},function (resp) {
           $("#ID-server-info").html("<b> <span style='color: red;font-size: large;'>"+resp.env+"</span>"
               + "<br>注册中心：" + resp.serverAddr
               + "&nbsp;&nbsp;&nbsp;&nbsp;服务分组："+ resp.group
               + "<br>服务列表："+resp.services
               + "</b>"
           );
        });
        //头部事件
        /* util.event('lay-header-event', {
             menuLeft: function(othis){ // 左侧菜单事件
                 layer.msg('展开左侧菜单的操作', {icon: 0});
             },
             menuRight: function(){  // 右侧菜单事件
                 layer.open({
                     type: 1,
                     title: '更多',
                     content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                     area: ['260px', '100%'],
                     offset: 'rt', // 右上角
                     anim: 'slideLeft', // 从右侧抽屉滑出
                     shadeClose: true,
                     scrollbar: false
                 });
             }
         });*/


        var table = layui.table;

        // 创建渲染实例
        table.render({
            id:'nodesTable',
            elem: '#nodes-table',
            url:'api/instance/list', // 此处为静态模拟数据，实际使用时需换成真实接口
            page:false,
            //height: 'full-250',
            lineStyle: 'height: 100px;', // 定义表格的多行样式
            cols: [[
                // {field:'instanceId', width:80, title: 'ID', sort: true},
                {field:'serviceName', width:400, title: '服务名', sort: false},
                {field:'ip', width:200, title: 'IP', sort: false},
                {field:'port', width:120, title: '端口'},
                {field:'enabled', width:120, title: '上线状态' ,templet: '#ID-table-demo-templet-switch'},
                // {field:'healthy', title: '健康状态', minWidth: 150},
                {field:'weight', width:120, title: '权重'},
                { title: '操作',align:'center', toolbar: '#templet-theads-tool'}
            ]],
            done: function(res, curr, count, origin){
                //2、定义一个tableFilter 挂载到 table 上
                localtableFilterIns.reload();
            }
        });

        //1、定义layui组件 得到 tableFilter 对象
        var tableFilter = layui.tableFilter;

        //2、定义一个tableFilter 挂载到 table 上
        var localtableFilterIns = tableFilter.render({
            'elem' : '#nodes-table',//table的选择器
            'mode' : 'local',//过滤模式
            'filters' : [
                {field: 'serviceName', type:'checkbox'},
                {field: 'ip', type:'checkbox'}
            ],//过滤项配置
            'done': function(filters){
                //结果回调
            }
        })

        table.on('tool(nodes)', function(obj){
            var ip = obj.data.ip;
            var port = obj.data.port;
            var id = obj.data.instanceId;
            if(obj.event === 'online'){
                layer.confirm('请确认是否上线该服务？<br><br>请检查IP与端口是一致<br>服务：:<b style="color:red;font-size: x-large">'+ip+':'+port+'</b>', {icon: 1, title:'服务上线操作',area: ['420px', '250px'] }, function(index){
                    //do something
                    $.post('api/instance/online',{id:id},function (resp) {
                        if(resp.success){
                            layer.msg("已成功上线。");
                            setTimeout(function (){
                                layer.close(index);
                                table.reload('nodesTable');
                            },700);
                        }else {
                            layer.msg("上线操作错误："+resp.msg);
                        }

                    });

                });
            }else if(obj.event === 'offline'){
                layer.confirm('请确认是否下线该服务？<br><br>请检查IP与端口是一致<br>服务：:<b style="color:red;font-size: x-large">'+ip+':'+port+'</b>', {icon: 2, title:'服务下线操作',area: ['420px', '250px'] }, function(index){
                    $.post('api/instance/offline',{id:id},function (resp) {
                        if(resp.success){
                            layer.msg("已成功下线。");
                            setTimeout(function (){
                                layer.close(index);
                                table.reload('nodesTable');
                            },700);

                        }else {
                            layer.msg("下线操作错误："+resp.msg);
                        }

                    });
                });
            }


        });



    });
</script>
</body>
</html>